.btn{
    // 基类，默认样式
    display: inline-block;
    padding:10px 15px;
    text-decoration:none;
    border:1px solid #666666;
    border-radius:5px;
    margin:0 10px;

    // 1.类型：default,primary,success
    // & 当前父元素的引用 class="btn primary"
    &.default{
        border-color: #666666;
        background-color: #f1eded;
        color:#666666;
    }

    &.primary{
        border-color: #3f9cff;
        background-color: #3f9cff;
        color:#ffffff;
        // 当是primary，且是 幽灵按钮的时候，设置文字颜色
        &.ghost{
            color:#3f9cff;
        }
    }
    
    &.success{
        border-color:green;
        background-color:green;
        color:#ffffff;
         // 当是success，且是 幽灵按钮的时候，设置文字颜色
         &.ghost{
            color:green;
        }
    }

    &.info{
        border-color:#909499;
        background-color:#909499;
        color:#ffffff;
        &.ghost{
            color:#909499;
        }
    }

    &.warning{
        border-color:#e5a43a;
        background-color:#e5a43a;
        color:#ffffff;
        &.ghost{
            color:#e5a43a;
        }
    }

    &.danger{
        border-color:#f46e6e;
        background-color:#f46e6e;
        color:#ffffff;

        &.ghost{
            color:#f46e6e;
        }
    }

    // 2.幽灵按钮-无背景
    &.ghost{
        background:none;
        color:#666666;
    }

    // 3.圆角
    &.radius{
        border-radius: 20px;
    }

}

// 原始css
// .btn.primary{
//     border-color: #3f9cff;
//     background-color: #3f9cff;
//     color:#ffffff;
// }

// .btn.success{
//     border-color:green;
//     background-color:green;
//     color:#ffffff;
// }